import React from "react";
import { useQuery } from "@tanstack/react-query";
const fetchUsers: any = async () => {
  const response = await fetch(`/api/user`);
  if (!response.ok) {
    throw new Error("Network response was not ok");
  }
  return response.json();
};

export default function Login() {
  const { data, error, isLoading, isFetching }: any = useQuery({
    queryKey: ["users"],
    queryFn: fetchUsers,
  });
  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return (
    <>
      {data.users.map((user: any) => {
        return <div key={user.id}>{user.name}</div>;
      })}
      {isFetching ? <span>Updating...</span> : null}
    </>
  );
}
